<template>
    <div class="mainSty">
        <div class="min_tit_sty flex_ard">
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.uploadNum }}</div>
                <div>上传总数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.earningsSum }}</div>
                <div>收益(元)</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.browseNum }}</div>
                <div>浏览次数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.downloadedNum }}</div>
                <div>被下载次数</div>
            </div>
        </div>
        <div class="main_con_sty">

            <el-table :data="tableData" border class="tabSty" @row-click="tabClick">
                <el-table-column prop="communityName" label="小区名" width="260" />
                <el-table-column prop="buildingNo" label="楼栋号" width="180" />
                <el-table-column prop="position" label="地区" width="450" />
                <el-table-column prop="createTime" label="收藏时间" />
            </el-table>

            <div class="flex_cen" style="width: 100%;margin-top: 50px;">
                <el-config-provider :locale="locale">
                    <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
                        :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getMyShouCangFun"
                        @current-change="getMyShouCangFun" />
                </el-config-provider>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { getMyShouCangApi, myStatisticsApi } from '@/api/index/index'
import { useRouter } from 'vue-router'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn

const router = useRouter()
const total = ref(0)
const params = reactive({
    size: 10,
    current: 1
})
const myUpdateNum = ref({
    browseNum: 0,
    downloadedNum: 0,
    earningsSum: 0,
    uploadNum: 0
})
const tableData = ref<any>()
const tabClick = (e: any) => {
    router.push({ path: '/room/detail', query: { id: e.houseId } })
}
const getMyShouCangFun = () => {
    getMyShouCangApi(params).then((res: any) => {
        tableData.value = res.data.records
        total.value = res.data.total
    })
}
const getMyStatistics = () => {
    myStatisticsApi().then((res: any) => {
        myUpdateNum.value = res.data
    })
}
onMounted(() => {
    getMyStatistics()
    getMyShouCangFun()
})
</script>
<style scoped>
:deep(.is-active) {
    background-color: #FF9D07 !important;
}

:deep(.el-pagination__sizes) {
    display: none !important;
}

.imgSty {
    width: 260px;
}

.uploadBox {
    margin-top: 30px;
}

.uploadItem {
    margin: 10px 0;
}

.item_name_sty {
    font-size: 22px;
    margin-bottom: 14px;
}

.statusSty {
    width: 500px;
}

.item_txt_sty {
    margin-left: 22px;
    margin-right: 30px;
    font-size: 18px;

}

.editBtnSty {
    /* padding: 10px 0; */
    position: relative;
    top: -20px;

    font-size: 18px;
    border-radius: 6px;
}

.saveBtnSty {
    padding: 10px 30px;
    background-color: #E21C20;
    font-size: 18px;
    border-radius: 6px;
    color: #fff;
    margin-left: 140px !important;
}

.con_tab_sty {
    border: 8px solid #f0f0f0;
    padding: 8px 0;
}

.con_tab_item_sty {
    margin: 0 20px;
}

.con_tit {
    width: 100%;
}

.con_tit el-input {
    width: 360px;
}

.con_tit div {
    margin-bottom: 20px;
    margin-right: 20px;
}

.cascSty {
    width: 240px;
}

.main_tab_sty {
    text-align: center;
    font-size: 18px;
    color: #A19EA8;
}

.main_tab_sty :first-child {
    color: #000;
    margin-bottom: 4px;
}

.mainSty {
    width: 80%;
    min-height: 500px;
}

.min_tit_sty {
    width: 100%;
    min-height: 120px;
    background-color: #fff;
    margin-bottom: 40px;
}

.main_con_sty {
    width: 100%;
    min-height: 500px;
    background-color: #fff;
    padding: 30px 20px;
    margin-bottom: 40px;
}
</style>